<template>
    <div class="bui-box single-mode" :ga_event="item.article_genre + '_item_click'">
        <div class="bui-left single-mode-lbox" :ga_event="item.article_genre + '_img_click'">
            <a class="img-wrap" :href="item.source_url" target="_blank">
                <img v-lazy="item.image_url" class="lazy-load-img" />
                <i v-if="item.has_video" class="pic-tip video-tip">
                    <span>{{item.video_duration_str}}</span>
                </i>
            </a>
        </div>
        <div class="single-mode-rbox">
            <div class="single-mode-rbox-inner">
                <div class="title-box" :ga_event="item.article_genre + '_title_click'">
                    <a class="link" :href="item.source_url" target="_blank">{{item.title}}</a>
                </div>
                <FooterBar :item="item" :dislikeUrl="dislikeUrl" :getUserInfoUrl="getUserInfoUrl"></FooterBar>
            </div>
        </div>
    </div>
</template>

<style lang="less">
    @import './style/mode.less';

    .single-mode {
        height: 123px;
        .mode-base();

        &-lbox {
            width: 158px;
            height: 102px;
            margin-right: 16px;
        }

        &-rbox {
            height: 100%;
            overflow: hidden;

            &:before {
                content: '';
                width: 0;
                font-size: 0;
                height: 100%;
                visibility: hidden;
                display: inline-block;
                vertical-align: middle;
            }
        }

        &-rbox-inner {
            display: inline-block;
            width: 100%;
            vertical-align: middle;
        }
    }

</style>

<script>
  import FooterBar from '../common/footerBar';

  export default {
    props: {
      item: {
        type: Object,
        default: {}
      },
      dislikeUrl: {
        type: String,
        default: '/api/dislike/'
      },
      getUserInfoUrl: {
        type: String,
        default: '/user/info/'
      }
    },
    components: {
      FooterBar
    }
  };
</script>



// WEBPACK FOOTER //
// singleMode.vue?69a2ea8e